<template>
  <div class="my-center-top">
   <div class="overView">
      <div class="nav-t">

       <!-- <div class="nav-item">
          <a :href="'http://m.suning.com/?snstoreTypeCode=1002&extId=0_1&snstoreId=' + lsdomain + '/myHome/membercard.html'" class="item-a">
            <img src="./images/huiyuanka.png" alt="会员卡">
            <p>会员卡</p>
          </a>
        </div>-->
        <div class="profile-photo">
         <img :src="info.img" alt="头像">
        </div>
        <!--<div class="nav-item">
          <div id="scanQd" class="item-a" @click="scanQ">
            <img src="./images/saoma.png" alt="扫一扫">
            <p>扫一扫</p>
          </div>
        </div>-->
      </div>
     <div class="name"> <span>{{info.nickName}}</span> <span class="lv" :class="info.lv"></span></div>
     <p class="yun-num">我的云钻:&nbsp;&nbsp;{{Math.floor(yunzhuan)}}</p>
   </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  import * as domains from '../../../config/env';
  //zepto md5
  (function(e){var h=function(p,o){return(p<<o)|(p>>>(32-o))};var g=function(s,q){var u,p,r,t,o;r=(s&2147483648);t=(q&2147483648);u=(s&1073741824);p=(q&1073741824);o=(s&1073741823)+(q&1073741823);if(u&p){return(o^2147483648^r^t)}if(u|p){if(o&1073741824){return(o^3221225472^r^t)}else{return(o^1073741824^r^t)}}else{return(o^r^t)}};var n=function(o,q,p){return(o&q)|((~o)&p)};var m=function(o,q,p){return(o&p)|(q&(~p))};var l=function(o,q,p){return(o^q^p)};var k=function(o,q,p){return(q^(o|(~p)))};var f=function(q,p,v,u,o,r,t){q=g(q,g(g(n(p,v,u),o),t));return g(h(q,r),p)};var b=function(q,p,v,u,o,r,t){q=g(q,g(g(m(p,v,u),o),t));return g(h(q,r),p)};var j=function(q,p,v,u,o,r,t){q=g(q,g(g(l(p,v,u),o),t));return g(h(q,r),p)};var d=function(q,p,v,u,o,r,t){q=g(q,g(g(k(p,v,u),o),t));return g(h(q,r),p)};var c=function(q){var w;var r=q.length;var u=r+8;var p=(u-(u%64))/64;var t=(p+1)*16;var v=Array(t-1);var o=0;var s=0;while(s<r){w=(s-(s%4))/4;o=(s%4)*8;v[w]=(v[w]|(q.charCodeAt(s)<<o));s++}w=(s-(s%4)) /4;o=(s%4)*8;v[w]=v[w]|(128<<o);v[t-2]=r<<3;v[t-1]=r>>>29;return v};var a=function(o){var r="",q="",s,p;for(p=0;p<=3;p++){s=(o>>>(p*8))&255;q="0"+s.toString(16);r=r+q.substr(q.length-2,2)}return r};var i=function(o){o=o.replace(/\x0d\x0a/g,"\x0a");var p="";for(var r=0;r<o.length;r++){var q=o.charCodeAt(r);if(q<128){p+=String.fromCharCode(q)}else{if((q>127)&&(q<2048)){p+=String.fromCharCode((q>>6)|192);p+=String.fromCharCode((q&63)|128)}else{p+=String.fromCharCode((q>>12)|224);p+=String.fromCharCode(((q>>6)&63)|128);p+=String.fromCharCode((q&63)|128)}}}return p};e.extend(e,{md5:function(A){var u=Array();var G,H,o,t,F,Q,P,O,L;var D=7,B=12,y=17,v=22;var N=5,K=9,J=14,I=20;var s=4,r=11,q=16,p=23;var E=6,C=10,z=15,w=21;A=i(A);u=c(A);Q=1732584193;P=4023233417;O=2562383102;L=271733878;for(G=0;G<u.length;G+=16){H=Q;o=P;t=O;F=L;Q=f(Q,P,O,L,u[G+0],D,3614090360);L=f(L,Q,P,O,u[G+1],B,3905402710);O=f(O,L,Q,P,u[G+2],y,606105819);P=f(P,O,L,Q,u[G+3],v,3250441966);Q=f(Q,P,O,L,u[G+4],D,4118548399);L=f(L,Q,P,O,u[G+5],B,1200080426);O=f(O,L,Q,P,u[G+6],y,2821735955);P=f(P,O,L,Q,u[G+7],v,4249261313);Q=f(Q,P,O,L,u[G+8],D,1770035416);L=f(L,Q,P,O,u[G+9],B,2336552879);O=f(O,L,Q,P,u[G+10],y,4294925233);P=f(P,O,L,Q,u[G+11],v,2304563134);Q=f(Q,P,O,L,u[G+12],D,1804603682);L=f(L,Q,P,O,u[G+13],B,4254626195);O=f(O,L,Q,P,u[G+14],y,2792965006);P=f(P,O,L,Q,u[G+15],v,1236535329);Q=b(Q,P,O,L,u[G+1],N,4129170786);L=b(L,Q,P,O,u[G+6],K,3225465664);O=b(O,L,Q,P,u[G+11],J,643717713);P=b(P,O,L,Q,u[G+0],I,3921069994);Q=b(Q,P,O,L,u[G+5],N,3593408605);L=b(L,Q,P,O,u[G+10],K,38016083);O=b(O,L,Q,P,u[G+15],J,3634488961);P=b(P,O,L,Q,u[G+4],I,3889429448);Q=b(Q,P,O,L,u[G+9],N,568446438);L=b(L,Q,P,O,u[G+14],K,3275163606);O=b(O,L,Q,P,u[G+3],J,4107603335);P=b(P,O,L,Q,u[G+8],I,1163531501);Q=b(Q,P,O,L,u[G+13],N,2850285829);L=b(L,Q,P,O,u[G+2],K,4243563512);O=b(O,L,Q,P,u[G+7],J,1735328473);P=b(P,O,L,Q,u[G+12],I,2368359562);Q=j(Q,P,O,L,u[G+5],s,4294588738);L=j(L,Q,P,O,u[G+8],r,2272392833);O=j(O,L,Q,P,u[G+11],q,1839030562);P=j(P,O,L,Q,u[G+14],p,4259657740);Q=j(Q,P,O,L,u[G+1],s,2763975236);L=j(L,Q,P,O,u[G+4],r,1272893353);O=j(O,L,Q,P,u[G+7],q,4139469664);P=j(P,O,L,Q,u[G+10],p,3200236656);Q=j(Q,P,O,L,u[G+13],s,681279174);L=j(L,Q,P,O,u[G+0],r,3936430074);O=j(O,L,Q,P,u[G+3],q,3572445317);P=j(P,O,L,Q,u[G+6],p,76029189);Q=j(Q,P,O,L,u[G+9],s,3654602809);L=j(L,Q,P,O,u[G+12],r,3873151461);O=j(O,L,Q,P,u[G+15],q,530742520);P=j(P,O,L,Q,u[G+2],p,3299628645);Q=d(Q,P,O,L,u[G+0],E,4096336452);L=d(L,Q,P,O,u[G+7],C,1126891415);O=d(O,L,Q,P,u[G+14],z,2878612391);P=d(P,O,L,Q,u[G+5],w,4237533241);Q=d(Q,P,O,L,u[G+12],E,1700485571);L=d(L,Q,P,O,u[G+3],C,2399980690);O=d(O,L,Q,P,u[G+10],z,4293915773);P=d(P,O,L,Q,u[G+1],w,2240044497);Q=d(Q,P,O,L,u[G+8],E,1873313359);L=d(L,Q,P,O,u[G+15],C,4264355552);O=d(O,L,Q,P,u[G+6],z,2734768916);P=d(P,O,L,Q,u[G+13],w,1309151649);Q=d(Q,P,O,L,u[G+4],E,4149444226);L=d(L,Q,P,O,u[G+11],C,3174756917);O=d(O,L,Q,P,u[G+2],z,718787259);P=d(P,O,L,Q,u[G+9],w,3951481745);Q=g(Q,H);P=g(P,o);O=g(O,t);L=g(L,F)}var M=a(Q)+a(P)+a(O)+a(L);return M.toLowerCase()}})})(Zepto);

  export default {
    data(){
      return{
        nickName:'',
        lv:'v0',
        lsdomain: domains.ls
      }
    },
    mounted(){
      this.$store.dispatch("getUserInfo")
    },
    methods:{
      getLv(str){
          return custLevelNum
      }
      /*,
      scanQ(){
        wx.scanQRCode({
          needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
              console.log(res);
              alert(1);
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          }
        });
      }*/
    },
    computed:{
      info(){
          let obj = {};
          let u = this.$store.state.my.userinfo;
          if(u && u.result && u.result.memberBaseInfo){
            obj.nickName = u.result.memberBaseInfo.nickName;
            obj.img = u.result.memberBaseInfo.img;
            obj.lv =  'v'+u.result.memberBaseInfo.custLevelNum.substring(1,2);
          }

          return obj;
      },
      yunzhuan(){
        return this.$store.state.my.yunzhuan;
      }
    },
  }
</script>

<style lang="less" scoped>
.overView{
  //background-color: #ff782d;
  width: 100%;
  height:380 / 50rem;
  background: url("./images/bg.png") no-repeat center;
  background-size:100% 380 / 50rem;

  //background: url("./images/line.png");
  padding-top: 0.8rem;
  padding-bottom: 1.4rem;
  .nav-t{
    overflow: hidden;
    display: flex;
    justify-content:space-around;;
    .nav-item{text-align: center;}

    .item-a{
      flex:1;
      float: left;
      width: 2.24rem;
      height: 2.24rem;
      padding-top: 0.4rem;
     // margin-left: 0.48rem;
      margin-top: 0.44rem;
      border-radius: 50%;
      background-color: rgba(0,0,0,0.2);
      img{
        display: block;
        margin: 0 auto;
        width: 0.8rem;
      }
      p{
        text-align: center;
        font-size: 0.4rem;
        color: #fff;
        line-height: 0.8rem;
      }
    }
    .profile-photo{
      float: left;
      width: 3.12rem;
      height: 3.12rem;
      margin-left: 0.48rem;
      border:0.2rem solid rgba(255,255,255,.2);
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 2.92rem;
        height: 2.92rem;
      }
    }
  }
  .name{
    margin-top: 0.2rem;
    text-align: center;
    font-size: 0.56rem;
    color: #fff;
    //line-height: 0.6rem;
    vertical-align: middle;
    .lv,&:after{
      vertical-align: middle;
      display: inline-block;
    }
    &:after{
      content: ""; height: 100%;
    }
    .lv{
      position: relative;
      top: -2 /50rem;
      width:58 /50rem;
      height:30 / 50rem;
      margin-left: 5 /50rem;
      background: url("./images/v0.png");
      background-size: 58 /50rem 30 / 50rem;
      &.v1{
        background: url("./images/v1.png");
        background-size: 58 /50rem 30 / 50rem;
      }
      &.v2{
        background: url("./images/v2.png");
        background-size: 58 /50rem 30 / 50rem;
      }
      &.v3{
        background: url("./images/v3.png");
        background-size: 58 /50rem 30 / 50rem;
      }
      &.v4{
        background: url("./images/v4.png");
        background-size: 58 /50rem 30 / 50rem;
      }
    }
  }
  .yun-num{
    margin-top: 0.2rem;
    font-size: 0.48rem;
    color: #fff;
    text-align: center;
    line-height: 0.55rem;
  }

}

</style>
